<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-HTML&amp;CSS |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-HTML&amp;CSS</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-04-15 16:55:34</span>
        <span class="mobile">2021-04-15 16:55</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/HTML/">HTML</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/CSS/">CSS</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><h3 id="如何理解语义化？"><a href="#如何理解语义化？" class="headerlink" title="如何理解语义化？"></a>如何理解语义化？</h3><ol>
<li>让人更容易读懂（增加代码可读性）</li>
<li>让搜索引擎更容易读懂（SEO）</li>
</ol>
<h3 id="默认情况下，哪些标签式块级元素？哪些式内联元素？"><a href="#默认情况下，哪些标签式块级元素？哪些式内联元素？" class="headerlink" title="默认情况下，哪些标签式块级元素？哪些式内联元素？"></a>默认情况下，哪些标签式块级元素？哪些式内联元素？</h3><ol>
<li>块级：div h1 table ul ol p ……</li>
<li>内联：span img input button ……</li>
</ol>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><h3 id="CSS-布局"><a href="#CSS-布局" class="headerlink" title="CSS - 布局"></a>CSS - 布局</h3><h4 id="盒子模型的宽度如何计算？"><a href="#盒子模型的宽度如何计算？" class="headerlink" title="盒子模型的宽度如何计算？"></a>盒子模型的宽度如何计算？</h4><ol>
<li>IE：width + padding + border</li>
<li>标准：width</li>
</ol>
<h4 id="clientWidth-x2F-offsetWidth"><a href="#clientWidth-x2F-offsetWidth" class="headerlink" title="clientWidth&#x2F;offsetWidth"></a>clientWidth&#x2F;offsetWidth</h4><ol>
<li>clientWidth: width + padding</li>
<li>offsetWidth: width + padding + border</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210414/width.6u75kmtp1iw0.gif" alt="width"></p>
<h4 id="margin纵向重叠问题"><a href="#margin纵向重叠问题" class="headerlink" title="margin纵向重叠问题"></a>margin纵向重叠问题</h4><ol>
<li>margin-top和margin-bottom在纵向会发生重叠，取大值</li>
<li>BFC可以消除重叠问题</li>
</ol>
<h4 id="margin负值问题"><a href="#margin负值问题" class="headerlink" title="margin负值问题"></a>margin负值问题</h4><ol>
<li>margin-top&#x2F;margin-left为负值，元素向上&#x2F;向左移动</li>
<li>margin-right为负值，右侧元素左移，自生不受影响</li>
<li>margin-bottom为负值，下侧元素上移，自生不受影响</li>
</ol>
<h4 id="BFC的理解和应用"><a href="#BFC的理解和应用" class="headerlink" title="BFC的理解和应用"></a>BFC的理解和应用</h4><ol>
<li>Block Format Context，块级格式化上下文。一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。</li>
<li>常见BFC形成条件<ul>
<li>float不是none</li>
<li>position是absolute&#x2F;fixed</li>
<li>overflow不是visible；display是flex&#x2F;inline-block</li>
</ul>
</li>
<li>常见应用：清除浮动；清除折叠边距</li>
</ol>
<h4 id="float布局的问题，以及clearfix"><a href="#float布局的问题，以及clearfix" class="headerlink" title="float布局的问题，以及clearfix"></a>float布局的问题，以及clearfix</h4><ol>
<li><p>圣杯布局</p>
<ul>
<li>使用float和padding撑开两边</li>
</ul>
</li>
<li><p>双飞翼布局</p>
<ul>
<li>使用float和margin撑开两边</li>
</ul>
</li>
<li><p>clearfix实现</p>
 <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="attribute">display</span>: table;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 兼容ie低版本 */</span></span><br><span class="line"><span class="selector-class">.clearfix</span> &#123;</span><br><span class="line">  *zoom: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="flex布局的问题"><a href="#flex布局的问题" class="headerlink" title="flex布局的问题"></a>flex布局的问题</h4><h5 id="flex概念"><a href="#flex概念" class="headerlink" title="flex概念"></a>flex概念</h5><blockquote>
<p>flex属性是flex-grow、flex-shrink、flex-basis属性的简写。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line">  <span class="attribute">flex</span>: flex-grow flex-shrink flex-basis|auto|initial|inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol>
<li>flex-grow是增长系数，接收一个数字。</li>
<li>flex-shrink是收缩系数，接收一个数字。</li>
<li>flex-basis是 元素在主轴方向上的初始大小，接收像素值或者auto&#x2F;initial&#x2F;inherit。</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.flex</span> &#123;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">1</span>; // <span class="attribute">flex-grow</span>: <span class="number">1</span></span><br><span class="line">  flex: <span class="number">1</span> <span class="number">1</span>; // <span class="attribute">flex-grow</span>: <span class="number">1</span> &amp; flex-shrink: <span class="number">1</span></span><br><span class="line">  flex: <span class="number">1</span> <span class="number">30px</span>; // <span class="attribute">flex-grow</span>: <span class="number">1</span> &amp; flex-basis: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">2</span> <span class="number">2</span> <span class="number">50px</span>; // <span class="attribute">flex-grow</span>: <span class="number">2</span> &amp; flex-shrink: <span class="number">2</span> &amp; flex-basis: <span class="number">50px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="flex语法"><a href="#flex语法" class="headerlink" title="flex语法"></a>flex语法</h5><ol>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-self</li>
</ol>
<h3 id="CSS-定位"><a href="#CSS-定位" class="headerlink" title="CSS - 定位"></a>CSS - 定位</h3><h4 id="relative-x2F-absolute-x2F-fixed分别根据什么定位"><a href="#relative-x2F-absolute-x2F-fixed分别根据什么定位" class="headerlink" title="relative&#x2F;absolute&#x2F;fixed分别根据什么定位"></a>relative&#x2F;absolute&#x2F;fixed分别根据什么定位</h4><ol>
<li>relative：依据自身定位</li>
<li>absolute：依据最近一层的定位元素定位<ul>
<li>absolute relative fixed</li>
<li>body（如果外层没有以上定位元素时）</li>
</ul>
</li>
<li>fixed：依据浏览器窗口定位</li>
</ol>
<h4 id="居中对齐有哪些方式"><a href="#居中对齐有哪些方式" class="headerlink" title="居中对齐有哪些方式"></a>居中对齐有哪些方式</h4><h5 id="水平居中"><a href="#水平居中" class="headerlink" title="水平居中"></a>水平居中</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* inline元素 */</span></span><br><span class="line"><span class="attribute">text-align</span>: center;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* block元素 */</span></span><br><span class="line"><span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 定位 */</span></span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br></pre></td></tr></table></figure>

<h5 id="垂直居中"><a href="#垂直居中" class="headerlink" title="垂直居中"></a>垂直居中</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* inline元素 */</span></span><br><span class="line"><span class="attribute">line-height</span>: <span class="number">10px</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 定位 */</span></span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br></pre></td></tr></table></figure>

<h5 id="水平垂直居中"><a href="#水平垂直居中" class="headerlink" title="水平垂直居中"></a>水平垂直居中</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 方法一 */</span></span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 方法二 */</span></span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">margin</span>: <span class="number">0</span>;</span><br></pre></td></tr></table></figure>

<h3 id="CSS-图文样式"><a href="#CSS-图文样式" class="headerlink" title="CSS - 图文样式"></a>CSS - 图文样式</h3><h4 id="line-height如何继承"><a href="#line-height如何继承" class="headerlink" title="line-height如何继承"></a>line-height如何继承</h4><h5 id="p标签的行高是多少"><a href="#p标签的行高是多少" class="headerlink" title="p标签的行高是多少"></a>p标签的行高是多少</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">200%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>40px</p>
</blockquote>
<h5 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h5><ol>
<li>如果时像素值，就直接继承像素值</li>
<li>如果时数字，就直接 本身font-size * line-height</li>
<li>如果百分比，就需要在定义的地方进行计算完成，然后继承给字类。</li>
</ol>
<h3 id="CSS-响应式"><a href="#CSS-响应式" class="headerlink" title="CSS - 响应式"></a>CSS - 响应式</h3><h4 id="rem-x2F-em"><a href="#rem-x2F-em" class="headerlink" title="rem&#x2F;em"></a>rem&#x2F;em</h4><ol>
<li>rem：相对长度单位，相对于根元素。</li>
<li>em：相对长度单位，相对于父元素。</li>
</ol>
<h4 id="vw-x2F-vh"><a href="#vw-x2F-vh" class="headerlink" title="vw&#x2F;vh"></a>vw&#x2F;vh</h4><ol>
<li>vw：视口（浏览器窗口的大小）单位，1vw &#x3D; window.innerWidth &#x2F; 100</li>
<li>vh：视口（出去导航bar的高度）单位，1vh &#x3D; window.innerHeight &#x2F; 100</li>
</ol>
<h4 id="常见的解决方案"><a href="#常见的解决方案" class="headerlink" title="常见的解决方案"></a>常见的解决方案</h4><ol>
<li>media-query：根据不同的屏幕宽度设置根元素font-size。</li>
<li>rem：基于根元素的相对单位。</li>
<li>vw&#x2F;vh</li>
</ol>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/HTML/">#HTML</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/CSS/">#CSS</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/04/16/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-JS(%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B%E3%80%81%E5%8E%9F%E5%9E%8B)/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-JS(变量类型、原型)</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/04/14/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-%E6%80%9D%E7%BB%B4%E5%AF%BC%E5%9B%BE/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
